<template>
  <Layout>
    <div class="product-detail">
      <ProductBanner :bannerImg="bannerImg" :title="productData.name"/>
      <div
        class="content"
        id="loadFileContent"
      >
<!--        <a-button type="primary" class="download" @click="downLoadFile">下载</a-button>-->
        <img :src="productData.image_main" alt="" class="product-img" v-if="productData.image_main">
        <p class="intro">{{productData.intro}}</p>
        <div v-html="productData.content"></div>
<!--        <h4>Feature</h4>-->
        <div v-html="productData.feature"></div>
<!--        <h4>Specification</h4>-->
        <div v-html="productData.specifications"></div>
<!--        <h4>Order Information</h4>-->
        <div v-html="productData.order_information"></div>
<!--        <h4>Topology</h4>-->
        <div class="topology-list">
          <div v-for="item in productData.topologyList" :key="item">
            <img :src="item" alt=""  @error="getError">
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script>
import {ref, onMounted} from 'vue'
import Layout from '/@/components/layout/Layout.vue'
import ProductBanner from '/@/components/ProductBanner.vue'
import {getProductInfo} from "../api/product";
import featureImg from "../assets/images/product/6. productthird.jpg"
import logoImg from "../assets/logo-error-small.png"
import {useRoute} from 'vue-router'
// import html2canvas from 'html2canvas'
// import JsPDF from 'jspdf'
import domToPdf from 'dom-to-pdf'
export default {
  name: 'ProductDetail',
  components:{Layout,ProductBanner},
  setup(){
    const route = useRoute()
    let productData = ref({})
    const bannerImg = featureImg
    const loadFileContent = ref();
    onMounted(()=>{
      getProductInfo(route.query.id * 1).then((res)=>{
        if(res && res.code ===200){
          productData.value = res.data
        }
      })
    })
    // const getError = (e) => {
    //   e.target.src = logoImg
    // }

    const downLoadFile =()=> {
      // window.pageYOffset = 0;
      // document.documentElement.scrollTop = 0;
      // document.body.scrollTop = 0;
      //
      // html2canvas(loadFileContent.value, {
      //   allowTaint: true,
      //   scale: 2,
      //   dpi: 182,//导出图片清晰度
      // }).then(function (canvas) {
      //   let contentWidth = canvas.width
      //   let contentHeight = canvas.height
      //   //一页pdf显示html页面生成的canvas高度;
      //   let pageHeight = contentWidth / 592.28 * 841.89
      //   //未生成pdf的html页面高度
      //   let leftHeight = contentHeight
      //   //页面偏移
      //   let position = 0
      //   let imgWidth = 595.28
      //   let imgHeight = 592.28 / contentWidth * contentHeight
      //   //返回图片dataURL，参数：图片格式和清晰度(0-1)
      //   let pageData = canvas.toDataURL('image/jpeg', 1.0)
      //   //方向默认竖直，尺寸ponits，格式 a4纸 [595.28,841.89]
      //   let PDF = new JsPDF('', 'pt', 'a4')
      //   //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      //   //当内容未超过pdf一页显示的范围，无需分页
      //   if (leftHeight < pageHeight) {
      //     //addImage将图片添加到pdf中
      //     //addImage中间两个参数控制x、y边距，
      //     //后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
      //     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
      //   } else {
      //     while (leftHeight > 0) {
      //       PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
      //       leftHeight -= pageHeight
      //       position -= 841.89
      //       //避免添加空白页
      //       if (leftHeight > 0) {
      //         //addPage()添加pdf页数
      //         PDF.addPage()
      //       }
      //     }
      //   }
      //   //保存名称
      //   PDF.save('计算结果.pdf')
      // })

      var element = document.getElementById('loadFileContent');
      var options = {
        filename: 'test.pdf'
      };
      domToPdf(element, options, function() {
        console.log('done');
      });
    }
    return {
      productData,
      // getError,
      bannerImg,
      downLoadFile,
      loadFileContent
    }
  }
}
</script>

<style lang="scss" scoped>
.product-detail {
  .content{
    margin:20px auto;
    width:70vw;
    color:#2e2e2e;
    h4{
      font-size:30px;
      line-height: 60px;
      text-align:center;
    }
    .product-img{
      margin:20px 0;
      width:100%;
      height:auto;
    }
    p{
      font-size:18px;
      line-height: 28px;
      color:#2e2e2e;
    }
    .topology-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;
      text-align: center;
      margin-bottom: 20px;
      img {
        width: 100%;
        height: 300px;
        object-fit: cover;
      }
    }
  }
}
</style>
